<template>
    <div class="sort_com-Wrapper ui segment" v-if="items">

        <div class="ui vertical stackable menu">
            <draggable element="div" v-model="items" :options="dragOptions" :move="onMove" @start="isDragging=true"
                       @end="isDragging=false" @change="hlChange">
                <transition-group type="transition" :name="'flip-list'" tag="div">
                    <sort_item :info="val" :model="ctl" v-for="(val,index) in items" class="item" :key="index">
                    </sort_item>
                </transition-group>
            </draggable>
        </div>
        <p class="submitRow">
            <button type="button" class="ui button" :class="{loading:onsubmit}" @click='doSort'>提 交</button>

        </p>
    </div>
</template>

<script type="text/ecmascript-6">
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    import draggable from 'vuedraggable'

    import sort_item from 'components/common/sort_item'


    export default {
        data() {
            return {
                items: null,
                editable: true,
                isDragging: false,
                onsubmit: false,
                inner_filtered: false,
                delayedDragging: false
            }
        },
        components: {
            draggable, sort_item
        },
        methods: {
            get_data() {
                let url = tool.getApi(this, 'Export', 'index');
                let param = {mid: this.model_id, notParse: 1, sort: 'sort asc,id asc'};;
                if (this.model_id) {
                    param.mid = this.model_id;
                }else if (this.ctl_cat) {
                    param.ctl_cat = this.ctl_cat;
                }

                util.http.SR(this, url, param, false, (data) => {
//                        this.items = data.reverse();
                    this.items = data;
                });

            },
            doSort() {
                util.showConfirm(this, () => {
                    let url = tool.getApi(this, 'Op', 'export_sort');
                    this.onsubmit=true;
                    let param = {
                        model_id: this.model_id,
                        items_hled: this.items_hled
                    };
                    util.http.SR(this, url, param, '排序成功',()=>{
                        this.onsubmit=false;
                    });
                },{content:'确认提交吗？'});

            },
            removeItem(gind, index) {
                let removed = this.items.splice(index, 1)[0]
                if (this.items.length == 0) {
                }
            },
            hlChange() {
            },
            onMove({
                       relatedContext,
                       draggedContext
                   }) {
                const relatedElement = relatedContext.element;
                const draggedElement = draggedContext.element;
                let rl = relatedContext.list.length
                let reTitle = relatedElement ? relatedElement.title : ''
                if (rl == 1 && reTitle == '占位（请忽略）') {
                    // tool.cl('fff')
                    relatedContext.list.splice(0, 1)
                }
                // tool.cl(relatedContext, draggedContext)
                return true
            },
        },
        watch: {
            v: function (val, old) {
                //        tool.cl(val, old)
                if (val != old) {

                    this.val = val
                }

            },
            isDragging(newValue) {
                if (newValue) {
                    this.delayedDragging = true
                    return
                }
                this.$nextTick(() => {
                    this.delayedDragging = false
                })
            }
        },
        computed: {
            items_hled() {
                return this.items.map((item,ind)=> {
                    return {id:item.id, sort:ind+1};
                })
            },
            model_id() {
                return this.$route.query.model_id;
            },
            ctl_cat() {
                return this.$route.query.ctl_cat;
            },
            ctl(){
                return this.$route.query.ctl;
            },
            dragOptions() {
                return {
                    animation: 0,
                    group: 'description',
                    disabled: !this.editable,
                    ghostClass: 'ghost'
                };
            },
            placeholder() {
                return `请输入${this.field.title}`
            },
        },
        props: [],
        created() {
            this.get_data();
        },
        destroyed() {
        },
        mounted() {
        }
    };
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import "../../common/style/mixin";

    .flip-list-move {
        transition: transform 0.5s;
    }

    .ui.vertical.menu {
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;

    }

    .sort_com-Wrapper {
        .sortMenu();
    }
</style>
